<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <!-- <link rel="stylesheet" href="layui/css/layui.css" /> -->
    </head>
    <body>
        <table id="studentTable" lay-filter="studentTable"></table>
        <script type="text/html" id="tools">
            <form class="layui-form" lay-filter="searchForm">
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                </div>
                <div class="layui-input-inline type">
                <select name="type" >
                    <option value="name">姓名</option>
                    <option value="gender">性别</option>
                    <option value="age">年龄</option>
                </select>
              </div>
              <div class="layui-input-inline value">
                  <input type="text" name="value" placeholder="请输入搜索条件" class="layui-input">
              </div>
              <div class="layui-input-inline">
                  <button type="button" lay-event="search" class="layui-btn layui-btn-primary layui-btn-sm">
                      <i class="layui-icon">&#xe615;</i>
                  </button>
              </div>
            </div>
            </form>
        </script>
        <script type="text/html" id="studentBar">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <!-- <script src="layui/layui.js"></script> -->
        <script>
            layui.use(function () {
                let { table, $,form,layer } = layui;
                table.render({
                    elem: "#studentTable",
                    url: "/students", //数据接口
                    toolbar: "#tools",
                    page: true, //开启分页
                    request: {
                        pageName: 'current' //页码的参数名称，默认：page
                        ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                    },
                    parseData: function(res){ //res 即为原始返回的数据
                        return {
                            "code": 0, //解析接口状态
                            "count": res.total, //解析数据长度
                            "data": res.rows //解析数据列表
                        };
                    },
                    limit:3,
                    limits:[3,5,10,15,20],
                    cols: [
                        [
                            //表头
                            {
                                field: "name",
                                title: "姓名",
                            },
                            {
                                field: "gender",
                                title: "性别",
                            },
                            { field: "age", title: "年龄" },
                            {fixed: 'right', width:150, align:'center', toolbar: '#studentBar'}
                        ],
                    ],
                    
                });

                table.on('toolbar(studentTable)',function(obj){
                    if(obj.event == "add"){
                        layer.open({
                            type:1,
                            title:'增加学生',
                            btn:['确定','取消'],
                            yes:function(index){     
                                console.log(form.val('addForm'));
                                $.ajax({
                                    type:"post",
                                    url:"/students",
                                    data:form.val('addForm'),
                                    success(){
                                        table.reload("studentTable");
                                        layer.close(index);
                                    }
                                });
                                
                            },
                            success:function(){
                                form.render();
                            },
                            content:`
                            <form class="layui-form" lay-filter="addForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-block">
                                    <input
                                        type="text"
                                        name="name"
                                        required
                                        lay-verify="required"
                                        placeholder="请输入姓名"
                                        autocomplete="off"
                                        class="layui-input"
                                    />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">年龄</label>
                                <div class="layui-input-block">
                                    <input
                                        type="text"
                                        name="age"
                                        required
                                        lay-verify="required"
                                        placeholder="请输入年龄"
                                        autocomplete="off"
                                        class="layui-input"
                                    />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-block">
                                <input type="radio" name="gender" value="男" title="男">
                                <input type="radio" name="gender" value="女" title="女">
                                </div>
                            </div>
                        </form>
                            `
                        });
                    }
                    else if(obj.event == "search"){
                        console.log(form.val('searchForm'));
                        table.reload('studentTable',{
                            where:form.val('searchForm')
                        });
                    }
                });
              
                table.on('tool(studentTable)',function(obj){
                    console.log(obj);
                    if(obj.event == 'del'){
                        // 删除学生
                        layer.confirm('是否删除？',function(index){
                            $.ajax({
                                type:"delete",
                                url:'/students/' + obj.data._id,
                                success(){
                                    table.reload('studentTable');
                                    layer.close(index);
                                }
                            });
                            
                        });
                    }
                    else if(obj.event == 'edit'){
                        layer.open({
                            type:1,
                            title:'修改学生',
                            btn:['确定','取消'],
                            yes:function(index){     
                                $.ajax({
                                    type:"put",
                                    url:"/students/"+obj.data._id,
                                    data:{
                                        ...form.val('updateForm')
                                    },
                                    success(){
                                        table.reload("studentTable");
                                        layer.close(index);
                                    }
                                });
                                
                            },
                            success:function(){
                                form.render();
                                $.ajax({
                                    type:"get",
                                    url:"/students/"+obj.data._id,
                                    success(res){
                                        form.val('updateForm',res);
                                    }
                                });
                            },
                            content:`
                            <form class="layui-form" lay-filter="updateForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-block">
                                    <input
                                        type="text"
                                        name="name"
                                        required
                                        lay-verify="required"
                                        placeholder="请输入姓名"
                                        autocomplete="off"
                                        class="layui-input"
                                    />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">年龄</label>
                                <div class="layui-input-block">
                                    <input
                                        type="text"
                                        name="age"
                                        required
                                        lay-verify="required"
                                        placeholder="请输入年龄"
                                        autocomplete="off"
                                        class="layui-input"
                                    />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-block">
                                <input type="radio" name="gender" value="男" title="男">
                                <input type="radio" name="gender" value="女" title="女">
                                </div>
                            </div>
                        </form>
                            `
                        });
                    }
                });
            });
        </script>
    </body>
</html>
